$row-prefix-cls: unquote('#{$css-prefix}row');
$col-prefix-cls: unquote('#{$css-prefix}col');

// mixins for grid system

@mixin loop-grid-columns($index, $class) {
  @if $index > 0 {
    @include loop-grid-columns(($index - 1), $class);

    .#{$col-prefix-cls}-span#{$class}-#{$index} {
      display: block;
      flex: 0 0 percentage(($index / $grid-columns));
      max-width: percentage(($index / $grid-columns));
    }
    .#{$col-prefix-cls}#{$class}-push-#{$index} {
      left: percentage(($index / $grid-columns));
    }
    .#{$col-prefix-cls}#{$class}-pull-#{$index} {
      right: percentage(($index / $grid-columns));
    }
    .#{$col-prefix-cls}#{$class}-offset-#{$index} {
      margin-left: percentage(($index / $grid-columns));
    }
    .#{$col-prefix-cls}#{$class}-order-#{$index} {
      order: $index;
    }
  }

  @if $index == 0 {
    .#{$col-prefix-cls}-span#{$class}-#{$index} {
      display: none;
    }
    .#{$col-prefix-cls}-push-#{$index} {
      left: auto;
    }
    .#{$col-prefix-cls}-pull-#{$index} {
      right: auto;
    }
    .#{$col-prefix-cls}#{$class}-push-#{$index} {
      left: auto;
    }
    .#{$col-prefix-cls}#{$class}-pull-#{$index} {
      right: auto;
    }
    .#{$col-prefix-cls}#{$class}-offset-#{$index} {
      margin-left: 0;
    }
    .#{$col-prefix-cls}#{$class}-order-#{$index} {
      order: 0;
    }
  }
}

@mixin make-grid($class: '') {
  @include loop-grid-columns($grid-columns, $class);
}
